<template>
  <div class="container">
    <div>
      <div class="content-box">
        <p class="font-32">商品组: {{group.goodsGroupName}}</p>
        <div>
          <el-radio v-model="radio" label="1" border>全部店</el-radio>
          <el-radio v-model="radio" label="0" border>部分店</el-radio>
        </div>
        <div class="flex-between">
          <div class="tip-title">{{ radio === '0' ? '商品组已授权' + total + '个店' : '商品组授权至所有店' }}</div>
          <div v-if="radio === '0'">
            <el-input @keyup.enter.native="handleSearch" v-model.trim="authorizeFrom.nickname" placeholder="请输入店铺名称" style="width: 180px"></el-input>
            <el-select class="mar-r-3 width-150" v-model="authorizeFrom.provinceCode" placeholder="省" clearable @change="changeCity(authorizeFrom.provinceCode)">
              <el-option v-for="item in provinceList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
              </el-option>
            </el-select>
            <el-select class="mar-r-3 width-150" v-model="authorizeFrom.cityCode" placeholder="市" clearable @change="changeDistrict(authorizeFrom.cityCode)">
              <el-option v-for="item in cityList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
              </el-option>
            </el-select>
            <el-select class="mar-r-3 width-150" v-model="authorizeFrom.countyCode" placeholder="区" clearable>
              <el-option v-for="item in districtList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
              </el-option>
            </el-select>
            <el-button-group class="mar-l-20">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button type="primary" @click="authorizeVisible = true">添加授权店铺</el-button>
              <el-button plain @click="handleDelete">批量移除</el-button>
            </el-button-group>
          </div>
        </div>
        <ul v-if="radio === '0'">
          <li class="flex shop-list" v-for="(item, index) in memberList" :key="index">
            <div class="imgbox">
              <img :src="item.avatar" alt />
            </div>
            <div class="flex-item mar-r-30">
              <span>{{item.nickname}}的店</span>
              <br>
              <span style="color: #3a8ee6">{{item.provinceName}}&nbsp;{{item.cityName}}&nbsp;{{item.countyName}}</span>
            </div>
            <el-button type="text" class="link-color" @click="handleDelete(item)">移除</el-button>
          </li>
        </ul>
        <div class="clear-both"></div>
        <div class="text-align-r mar-t-10 mar-b-10 pad-p-5" v-if="total > authorizeFrom.size" >
            <el-button type="text" :disabled="authorizeFrom.currentPage === 1" @click="beforePage">上一页</el-button>
            <span>|</span>
            <el-button type="text" :disabled="(authorizeFrom.currentPage * authorizeFrom.size) > total" @click="nextPage">下一页</el-button>
        </div>
      </div>
    </div>
    <div class="text-align-c pad-t-30 pad-b-30">
      <el-button type="primary" @click="handleSave()">保存</el-button>
      <el-button @click="$router.go(-1)">返回</el-button>
    </div>

    <el-dialog title="选择店铺" v-el-drag-dialog :visible.sync="authorizeVisible" :close-on-press-escape="true" :center="true" width="1100px">
      <authorize-select :groupId="group.goodsGroupId" :showFlag="authorizeVisible" @addShop="addShopCallBack"></authorize-select>
    </el-dialog>
  </div>
</template>
<script>
import authorizeSelect from '../components/authorize-select'
import elDragDialog from '@/directive/el-dragDialog'
import { listProvince, listCity, listDistrict } from '@/api/area/area'
import { getGoodsGroup, pageAuthorize, saveGoodsGroup, deleteAuthorize } from '@/api/goods/goodsGroup'
export default {
  components: {
    authorizeSelect
  },
  directives: {
    elDragDialog
  },
  data() {
    return {
      radio: '1',
      total: 0,
      authorizeVisible: false,
      authorizeFrom: {
        currentPage: 1,
        size: 18,
        nickname: '',
        provinceCode: '',
        cityCode: '',
        countyCode: ''
      },
      provinceList: [],
      cityList: [],
      districtList: [],
      memberList: [],
      // 商品组对象
      group: {
        goodsGroupId: '',
        supplierName: ''
      }
    }
  },
  created() {
    const queryParams = this.getCurrentPage().query
    // 获取省
    listProvince().then(response => {
      this.provinceList = response.data
    })
    // 获取商品组
    getGoodsGroup({ goodsGroupId: queryParams.groupId }).then(response => {
      this.group = response.data
      this.radio = this.group.memberAllFlag === 1 ? '1' : '0'
      this.initList()
    })
  },
  methods: {
    initList() {
      var self = this
      self.authorizeFrom.goodsGroupId = this.group.goodsGroupId
      pageAuthorize(self.authorizeFrom).then(response => {
        self.memberList = response.data.records
        self.total = response.data.total
      })
    },
    // 获取市
    changeCity(provinceCode) {
      this.cityList = []
      this.districtList = []
      this.authorizeFrom.cityCode = ''
      this.authorizeFrom.countyCode = ''
      if (provinceCode) {
        listCity(provinceCode).then(response => {
          this.cityList = response.data
        })
      }
    },
    // 获取区
    changeDistrict(cityCode) {
      this.districtList = []
      this.authorizeFrom.countyCode = ''
      if (cityCode) {
        listDistrict(cityCode).then(response => {
          this.districtList = response.data
        })
      }
    },
    // 查询事件
    handleSearch() {
      this.authorizeFrom.currentPage = 1
      this.initList()
    },
    // 授权添加回调事件
    addShopCallBack(refreshFlag) {
      if (refreshFlag) this.initList()
      else this.authorizeVisible = false
    },
    // 删除事件
    handleDelete(item) {
      var ids = []
      var msg = ''
      if (item.goodsGroupAuthorizeId) {
        ids.push(item.goodsGroupAuthorizeId)
        msg = '确定要移除选定店铺？'
      } else {
        this.memberList.forEach(o => {
          ids.push(o.goodsGroupAuthorizeId)
        })
        msg = '批量移除将移除当前页面所有店铺，确定要移除？'
      }
      if (ids.length === 0) {
        this.$message({ message: '暂无店铺', type: 'warning' })
        return
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAuthorize({ goodsGroupAuthorizeIds: ids }).then(response => {
          if (response.isError) return
          this.$message({ type: 'success', message: '删除成功!' })
          this.calPage(ids.length)
          this.initList()
        })
      }).catch(() => {
      })
    },
    // 保存事件
    handleSave() {
      var form = this.group
      form.memberAllFlag = this.radio === '1' ? 1 : 0
      saveGoodsGroup(form).then(response => {
        if (response.isError) return
        this.$message({ type: 'success', message: '保存成功!' })
        this.initList()
      })
    },
    // 计算页数
    calPage(changeLength) {
      const now = Math.ceil((this.total - changeLength) / this.authorizeFrom.size)
      if (now < this.authorizeFrom.currentPage && now !== 1) this.authorizeFrom.currentPage--
      else this.authorizeFrom.currentPage = 1
    },
    // 上一页事件
    beforePage() {
      this.authorizeFrom.currentPage--
      this.initList()
    },
    // 下一页事件
    nextPage() {
      this.authorizeFrom.currentPage++
      this.initList()
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  background: rgb(248, 249, 251);
  min-height: calc(100vh - 105px);
  padding: 20px 30px 0 30px;
}

.content-box {
  background: white;
  padding: 20px;
  .tip-title {
    color: rgb(58, 142, 230);
    margin: 20px 0;
  }
  .shop-list {
    width: 32%;
    float: left;
    padding-right: 5%;
    padding-bottom: 20px;
    .link-color {
      color: #0000ff;
    }
    .imgbox {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20px;
    }
  }
  .pad-p-5 {
    padding-right: 5%;
  }
  .clear-both {
    clear: both;
  }
}
</style>